<template>
	<div class="j-header">
		<div class="top">
			<div class="container clearfix">
				<div class="pull-left logos">
					<a href="/"><img src="../assets/logo.png"></a>
				</div>
				<div class="pull-right top-right">
					<div class="clearfix top-right-top">
						<div class="pull-right top-link login-link">
							<router-link to="/login">登录</router-link>
							<span>|</span>
							<router-link to="/register">注册</router-link>
						</div>
						<div class="pull-right top-link">
							<a href="">中文</a>
							<a href="">ENGLISH</a>
							<a href="">日本語</a>
						</div>
					</div>
					<div class="clearfix top-right-down">
						<div class="pull-left news-phone">400-675-5599</div>
						<div class="pull-right search-c">
							<form class="" method="post" action="#" style="display: table;">
								<input type="input" class="form-control search-txt" value="" name="keyword" />
							</form>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="header-box">
			<div class="container">
				<navbar>
					<template slot="collapse">
						<navbar-nav>
							<li :class="{active:1 == indexNum}"><router-link to="/" role="button">首页</router-link></li>
							<dropdown tag="li" :class="{active:2 == indexNum}">
								<a class="dropdown-toggle">关于我们</a>
								<template slot="dropdown">
										<li><router-link to="/about/company" role="button">集团概况</router-link></li>
										<li><router-link to="/about/pcbb" role="button">脐带血库</router-link></li>
										<li><router-link to="/about/hospital" role="button" target="_blank">附属医院</router-link></li>
										<li><router-link to="/about/experts" role="button">专家团队</router-link></li>
										<li><router-link to="/about/events" role="button">大事记</router-link></li>
										<li><router-link to="/about/party" role="button">党建工作</router-link></li>
								</template>
							</dropdown>
							<dropdown tag="li" :class="{active:3 == indexNum}">
								<a class="dropdown-toggle" role="button">新闻中心</a>
								<template slot="dropdown">
										<li><router-link to="/news/newslist?flag=1" role="button">集团动态</router-link></li>
										<li><router-link to="/news/newslist?flag=2" role="button">应用案例</router-link></li>
										<li><router-link to="/news/newslist?flag=3" role="button">行业新闻</router-link></li>
								</template>
							</dropdown>
							<dropdown tag="li" :class="{active:4 == indexNum}">
								<a class="dropdown-toggle" role="button">生命银行</a>
								<template slot="dropdown">
										<li><router-link to="/lifebank/beed" role="button">生命种子</router-link></li>
										<li><router-link to="/lifebank/storage" role="button">存储方式</router-link></li>
										<li><router-link to="/lifebank/insurance" role="button">特定疾病保险</router-link></li>
										<li><router-link to="/lifebank/signing" role="button">签约指南</router-link></li>
										<li><router-link to="/lifebank/collection" role="button">采集合作医院</router-link></li>
								</template>
							</dropdown>
							<dropdown tag="li" :class="{active:5 == indexNum}">
								<a class="dropdown-toggle" role="button">产品服务</a>
								<template slot="dropdown">
										<li><router-link to="/product/cordblood" role="button">脐带血造血干细胞</router-link></li>
										<li><router-link to="/product/mesnchymal" role="button">间充质干细胞</router-link></li>
										<li><router-link to="/product/peripheral" role="button">外周血造血干细胞</router-link></li>
										<li><router-link to="/product/transplant" role="button">移植合作医院</router-link></li>
								</template>
							</dropdown>
							<li :class="{active:6 == indexNum}"><a role="button">技术服务平台</a></li>
							<li :class="{active:7 == indexNum}"><a role="button">会员服务</a></li>
							<dropdown tag="li" :class="{active:8 == indexNum}">
								<a class="dropdown-toggle" role="button">联系我们</a>
								<template slot="dropdown">
										<li><router-link to="/contact/question" role="button">常见问题</router-link></li>
										<li><router-link to="/contact/join" role="button">加入我们</router-link></li>
										<li><router-link to="/contact/contact" role="button">联系方式</router-link></li>
								</template>
							</dropdown>
						</navbar-nav>
				</template>
			</navbar>
			</div>
		</div>
	</div>
</template>
<script>
import Velocity from 'velocity-animate'
export default{
  props: {
    indexNum: Number
  },
  data () {
    return {
      num: 1
    }
  },
  mounted () {
    Velocity(document.querySelector('body'), 'scroll', {
      duration: 0,
      top: 0
    })
  },
  computed: {
    flag (){
	    return this.indexNum
    }
  },
  watch: {
    flag (v){
      this.indexNum = v
      console.log(this.indexNum)
    }
  }
}
</script>
<style rel="stylesheet/scss" type="text/scss" lang="scss">
	.j-header{
		.container{
			padding: 0;
		}
		.clearfix{
			overflow: hidden;
		}
		.top{
			padding: 10px 0;
			.pull-left{
				float: left;
			}
			.pull-right{
				float: right;
			}
			.logos{
				margin-top:5px;
			}
			.top-right{
				.top-right-top{
					.top-link{
						margin-left: 50px;
						line-height: 22px;
						a{
							color:#595757;
							font-size:12px;
							margin-left:10px;
							text-decoration: none;
						}
					}
					.login-link{
						margin-left: 70px;
						a{
							margin-left:0;
						}
						span{
							vertical-align: top;
							padding:0 10px;
							color:#595757;
							font-size:12px;
						}
					}
				}
				.top-right-down{
					margin-top: 5px;
					.news-phone{
						height:26px;
						line-height:26px;
						font-size:20px;
						font-weight:bold;
						padding-left:5px;
						color:#02adef;
					}
					.search-c{
						.search-txt{
							width:164px;
							height:24px;
							font-size:13px;
							border-radius:0;
							box-shadow:none;
							-webkit-box-shadow: none;
							margin-left:15px;
							background:url(../assets/icon/search-back.png) right center no-repeat;
							padding-left:5px;
							border: 1px solid #c7c7c7;
							border-right: none;
						}
					}
				}
			}
		}
		.header-box{
			background: #005faf;
			.container{
				padding: 0;
				margin: 0 auto;
			}
		}
	}
	.navbar {
		position: relative;
		min-height: 45px!important;
		margin-bottom: 0!important;
		border: none!important;
	}
	.navbar-default {
		background-color: #005faf!important;
		border-color: #e7e7e7!important;
		box-shadow:none!important;
	}
	.container-fluid{
		padding: 0!important;
	}
	.navbar-default .navbar-nav > .active > a,
	.navbar-default .navbar-nav > .active > a:hover,
	.navbar-default .navbar-nav > .active > a:focus {
		color: #000!important;
		background-color: #ffffff!important;
	}
	.navbar-default .navbar-collapse, .navbar-default .navbar-form {
		border: none!important;
	}
	.nav{
		width: 100%;
	}
	.nav > li > a {
		position: relative;
		display: block;
		padding: 0!important;
		text-align: center;
		line-height: 45px!important;
	}
	.navbar-default{
		background-image: none!important;
	}
	.navbar-default .navbar-nav > li > a {
		color: #ffffff!important;
		font-size: 16px!important;
	}
	.navbar-default .navbar-nav > li > a:hover,
	.navbar-default .navbar-nav > li > a:focus {
		color: #000!important;
		background-color: #ffffff!important;
	}
	.navbar-default .navbar-nav>.active>a,
	.navbar-default .navbar-nav>.open>a {
		background-image: none!important;
		filter: none!important;
		background-repeat: inherit!important;
		-webkit-box-shadow: none!important;
		box-shadow: none!important;
	}
	.navbar-default .navbar-nav > .open > a,
	.navbar-default .navbar-nav > .open > a:hover,
	.navbar-default .navbar-nav > .open > a:focus {
		color: #000!important;
		background-color: #ffffff!important;
	}
	.dropdown-menu {
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 1000;
		display: none;
		float: left;
		min-width: 140px!important;
		padding:0!important;
		margin: 0!important;
		font-size: 14px!important;
		background-color: #005faf!important;
		border: none!important;
	}
	.dropdown-menu > li {
		width: 100%;
		a{
			text-align: center;
			font-size: 14px;
			color: #ffffff!important;
			padding: 10px!important;
		}
	}
	.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
		color: #000000!important;
		text-decoration: none!important;
		background-color: #ffffff!important;
		background-image: none!important;
	}
	.navbar-default .navbar-nav > li.dropdown:hover ul.dropdown-menu{
		display: block!important;
	}
	.navbar-collapse{
		padding: 0!important;
		margin: 0!important;
	}
	@media (min-width: 768px){
		.nav > li {
			display: table-cell;
			width: 12%;
		}
		.nav > li:first-child {
			display: table-cell;
			width: 8%;
		}
		.dropdown-menu > .nav > li:first-child {
			width: 100%!important;
		}
	}
	@media (max-width: 991px){
		.navbar-default .navbar-nav > li > a {
			font-size: 14px!important;
		}
	}
	@media (max-width: 767px) {
		.container > .navbar-header,.container-fluid > .navbar-header,
		.container > .navbar-collapse,.container-fluid > .navbar-collapse {
			margin-right: 0!important;
			margin-left: 0!important;
		}
		.navbar-nav{
			margin: 0!important;
		}
		.nav > li {
			a{
				padding-left: 15px!important;
				text-align: left!important;
			}
		}
		.dropdown-menu > .nav > li {
			a{
				padding-left: 30px!important;
			}
		}
	}
</style>